<template>
    <div class="momentTop">
        <div class="item" @click="memberObj.open=true">
            成员 <van-icon name="arrow-down" size="16px" color="#999"/>
        </div>
        <div class="item" @click="typeObj.open=true">
            类型 <van-icon name="arrow-down" size="16px" color="#999"/>
        </div>
        <div class="item" @click="dateShow=true">
            时间 <van-icon name="arrow-down" size="16px" color="#999"/>
        </div>
    </div>
    <member-select v-model:show="memberObj.open" @confirm="getMemberId"/>
    <moment-type-select v-model:show="typeObj.open" @confirm="getType"/>
    <van-calendar v-model:show="dateShow" type="range" :min-date="minDate" :max-date="maxDate" @confirm="onDateConfirm" :default-date="defaultDate"/>
</template>

<script setup>
import { ref,onMounted,nextTick } from "vue";
import moment from 'moment'
import memberSelect from "@/components/memberSelect.vue"
import momentTypeSelect from "@/components/momentTypeSelect.vue"

const emit = defineEmits(['search'])

const memberObj = ref({
    open:false,
    creator:'',// 选择的成员id
    
})
const typeObj = ref({
    open:false,
    filter_type:'' // 选择的值
})

const dateShow = ref(false)
const minDate = ref(new Date('2010-01-01'))
const maxDate = ref(new Date())
const start_time = ref('')
const end_time = ref('')
const defaultDate = ref([])
const selectDate = ref([])


onMounted(()=>{
    
})

const getMemberId = (userid) =>{
    console.log("QQQ1:",userid)
    //memberObj.value.creator = userid
    emit('search',{creator:userid})
}

const getType = (type)=>{
    console.log("QQQ2:",type)
    emit('search',{filter_type:type})
}

const onDateConfirm =(dates)=>{
    const start_time = moment(moment(dates[0]).format('YYYY-MM-DD')+' 00:00:01').unix()
    const end_time = moment(moment(dates[1]).format('YYYY-MM-DD')+' 23:59:59').unix()
    dateShow.value = false
    console.log(start_time.value ,end_time.value)
    emit('search',{start_time,end_time})
}




</script>

<style lang="scss" scoped>
.momentTop{
    display: flex;
    height: 90px;
    background-color: #fff;
    box-shadow: 0 0 5px #eee;
    border-bottom: 1px solid #eee;
    .item{
        display: flex;
        flex:1 ;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
    }
}
</style>